<template>
  <dl class="introduce">
    <dd v-for="(item, index) in list" :key="index">
      <span>{{ $t(item.title) }}</span>
      <img v-lazy="item.img" alt="" />
      <p>{{ $t(item.text) }}</p>
    </dd>
  </dl>
</template>

<script setup lang="ts">
import { reactive } from "vue";
const getImg = (url) => {
  return new URL(`../../../assets/img/${url}`, import.meta.url).href;
};
let list = reactive([
  {
    img: getImg("bb3.png"),
    title: "language.business.ititle1",
    text: "language.business.itext1",
  },
  {
    img: getImg("bb4.png"),
    title: "language.business.ititle2",
    text: "language.business.itext2",
  },
  {
    img: getImg("bb5.png"),
    title: "language.business.ititle3",
    text: "language.business.itext3",
  },
]);
</script>

<style scoped lang="scss">
.introduce {
  position: relative;
  color: #fff;
  width: 100%;
  dd {
    width: 100%;
    background-color: rgb(39, 43, 47);
    padding: 10px 22px 16px;
    box-sizing: border-box;
    background-color: #272b2f;
    border: 1px solid #272b2f;
    border-radius: 10px;
    margin-bottom: 15px;
    img {
      width: 100%;
      margin: 15px 0;
    }
    span {
      font-size: 20px;
      color: #fff;
    }
    p {
      font-size: 12px;
      color: #b5bac8;
    }
  }
}
</style>
